<template>
    <div class="yan">
        <div class="img"><img :src=shopimg></div>
        <div class="name">{{shopname}}</div>
        <div class="shopp">
            <ul>
                <li v-for="(val,ind) in shopproduct" :key="ind" @click="details($event)">
                    <!-- {{val.p_id}} -->
                   <div>
                        <img :src=val.p_img :alt=val.p_id>
                <div class="product-name">{{val.p_name}}</div>
                <div class="price"><span><b>{{val.p_price}}</b>元</span><i class="iconfont icon-gouwuchekong"></i></div>
                   </div>
                </li>
            </ul>
        </div>
        <div class="rehome" @click="shouye"> <i class="fa fa-home"></i></div>
        
    </div>
</template>

<script>
export default {
    data () {
        return {
            shopid:"",
            shopimg:"",
            shopname:"",
            shopcolor:"",
            shopproduct:"",
            id:""
            // productid:""
        }
    },
created() {
     this.$axios.post("http://127.0.0.1:8081/client/hshopimg",{
             hs_id:this.$route.query.id
         }).then(res=>
    {
        // console.log("res",res.data)
        this.shopimg=res.data.img[0].hs_img;
        this.shopname=res.data.img[0].hs_name;
        // this.shopcolor=res.data.img[0].hs_color;
    }),
    this.$axios.post("http://127.0.0.1:8081/client/product",{
             hs_id:this.$route.query.id
         }).then(res=>
    {
       this.shopproduct=res.data.pro;
    })
},
methods: {
    shouye()
    {
        this.$router.push("/")
    },
    details(e)
    {
        this.id=e.path[0].alt;
        this.$router.push({path:"/details",query:{productid:this.id}});
    }
}
}
</script>

<style>
.yan{
    width: 100%;
    height: 100%;
    /* background: #e24534; */
}
.yan .img,.yan .shopp{
    width: 1080px;
    margin: 0 auto;
}
.yan .name{
    width: 1080px;
    margin: 0 auto;
    height: 80px;
    line-height: 80px;
    color:#e24534;
    text-align: center;
    font-size: 36px;
    letter-spacing: 20px;
    font-weight: bold;
}
.yan .shopp ul::after
{
    content: "";
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    height: 0;
}
.yan .shopp li{
    float: left;
    width: 330px;
    margin:0 15px;
    background: #fff;
    padding: 20px 0;
    text-align: center;
    box-sizing:border-box; 
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px #888 solid;
}
.yan  .shopp li:hover{
    box-shadow: 0px 0px 15px #888888;
     border: 1px #e24534 solid;
}
.yan .shopp li img{
    width: 200px;
    /* display: block; */
    background-origin: #888;
}
.yan .shopp .product-name{
    height: 50px;
    line-height: 50px;
    text-align: left;
    border-top: #888 1px solid;
    padding: 0 30px;
    font-size: 20px;
    overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
    /* margin-bottom: 20px; */
}
.yan .shopp .price{
    text-align: left;
    height: 50px;
    line-height: 50px;
     padding: 0 30px 0 30px;
}
.yan .shopp .price span{
    color:#e24534;
    font-size: 20px;
    }
    .yan .shopp .price i{
        float: right;
        background: #e24534;
        display: block;
        width: 60px;
        height:40px ;
        line-height: 40px;
        text-align: center;
        color: #fff;
        font-size: 20px;
        border-radius:5px; 
    }
.rehome{
    position: fixed;
     width: 40px;
    height: 40px;
    border: #888 1px solid;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    top:75%;
    right: 10%;
    color: #888;
}
.rehome i{
   font-size: 26px;
    
}

</style>
